import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import { AtTabs, AtTabsPane, AtDivider } from 'taro-ui';
import GoodsItem from '@/components/GoodsItem';
import './index.scss';

const getTabsGoods = (goodsInfo: any) => {
  let list: any[] = [];
  Object.keys(goodsInfo).map((item, index) => {
    list.push({
      title: item,
      value: index,
      list: goodsInfo[item],
    });
  });
  return list;
};

export default function ({ goodsList }) {
  const [current, setCurrent] = useState(0);
  const [tabsGooods, setTabsGoods] = useState<any[]>([]);

  useEffect(() => {
    setTabsGoods(getTabsGoods(goodsList));
  }, [goodsList]);

  const onHandle = (id: number) => {
    console.log('id: ', id);
    Taro.navigateTo({
      url: '/pages/goods/detail/index?id=' + id,
    });
  };

  const onTabChange = (value) => {
    console.log(value);
    setCurrent(value);
  };
  return (
    <View className="home-miaosha">
      <AtTabs scroll current={current} tabList={tabsGooods} onClick={onTabChange}>
        {tabsGooods.map((tab, index) => {
          return (
            <AtTabsPane key={tab.value} current={current} index={index}>
              <View className="product-list">
                {tab.list.map((goods) => {
                  return (
                    <GoodsItem
                      key={goods.goods_id}
                      goodsInfo={goods}
                      onHandle={() => onHandle(goods.goods_id)}
                    />
                  );
                })}
                <AtDivider content="~没有更多了~" fontColor="#aaa" lineColor="transparent" />
              </View>
            </AtTabsPane>
          );
        })}
      </AtTabs>
    </View>
  );
}
